<template>
  <div>
    <div class="header">
      <i class="iconfont icon-qianjin-copy" @click="iconClick"></i>
      {{headTitle}}
      <div class="right" @click="getMoney">我要取现</div>
    </div>
    <div class="main">
      <div class="topItem">
        <div v-if="active==1">
          <div class="topItem-left active" @click='card1'>信用卡</div>
          <div class="topItem-right" @click='card2'>储蓄卡</div>
        </div>
        <div v-else>
          <div class="topItem-left" @click='card1'>信用卡</div>
          <div class="topItem-right active" @click='card2'>储蓄卡</div>
        </div>
        
      </div>
      <div class="addCard" @click="addCard" v-show="active==1 && methodList1!=0">+添加信用卡</div>
      <!-- <div class="addCard" @click="addCard" v-show="active==2 && methodList2!=0">+添加储蓄卡</div> -->
      <div class="contentItem">
        <!-- 信用卡列表 -->
        <div class="contentItem-left" v-show="active==1">

          <!-- 无卡 -->
          <div class="hasNoCard" v-if="methodList1==0">
            <img src="../../../assets/enchash/nocard.png">
            <p>还没有添加银行卡</p>
            <div @click="addCard">立即添加</div>
          </div>

          <!-- 有卡 -->
          <div class="contentItem-left-item" v-else-if="methodList1!=0" v-for="(item,index) in methodList1" :key="index">
            <div class="contentItem-left-item-top">
              <img class="bankImg" v-bind:src="item.bankThumbnail" alt="">
              <div class="bank">
                <div class="bankName">{{item.bankName}}</div>
                <div class="bankNO">**** **** **** {{item.cardCodeSub}}</div>
                <img class="delete" @click="deleteCreditCard(item.dataId)" src="../../../assets/enchash/delete.png" alt="">
              </div>
            </div>
            <div class="contentItem-left-item-bottom">
              <div class="msg" v-if='index==0' style="color:#959595;">提现信用卡</div>
              <div class="msg" @click="setDefaultCard(item.dataId)" v-else >设为提现卡</div>
              <img src="../../../assets/enchash/unionpay.png" alt="">
            </div>
          </div>
          
        </div>

        <!-- 储蓄卡列表 -->
        <div class="contentItem-right" v-show="active==2">

          <!-- 无卡 -->
          <div class="hasNoCard" v-if="methodList2==0">
            <img src="../../../assets/enchash/nocard.png">
            <p>还没有添加银行卡</p>
            <div @click="addCard">立即添加</div>
          </div>
          <!-- 有卡 -->
          <div class="contentItem-left-item" v-else-if="methodList2!=0" v-for="(item,index) in methodList2" :key="index">
            <div class="contentItem-left-item-top">
              <img class="bankImg" v-bind:src="item.bankThumbnail" alt="">
              <div class="bank">
                <div class="bankName">{{item.bankName}}</div>
                <div class="bankNO">**** **** **** {{item.cardCodeSub}}</div>
                <img class="delete" @click="deleteCard(item.dataId)" src="../../../assets/enchash/delete.png" alt="">
              </div>
            </div>
            <div class="contentItem-left-item-bottom">
              <div class="msg" v-if='index==0' style="color:#959595;">到账储蓄卡</div>
              <div class="msg" @click="setDefaultCard(item.dataId)" v-else>设为到账储蓄卡</div>
              <img src="../../../assets/enchash/unionpay.png" alt="">
            </div>
          </div>
          
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import '../../../js/lib/flexble.js'
import commons from '../../../common/js/common.js'
import Top from 'components/Header/Header'
import { Indicator, MessageBox } from "mint-ui";
export default {
  name: 'Applyrecord',
  components: { Top },
  data() {
    return {
      methodList1: [],
      methodList2: [],
      headTitle: '我的卡包',
      active:window.localStorage.getItem('active')?window.localStorage.getItem('active'):'1'
    }
  },
  mounted(){
    Vue.http.interceptors.push((request, next) => { //请求拦截器
      //请求前
      request.headers.set('token', commons.getCookie('token')); //设置请求头
      Indicator.open('加载中...'); //请求loading
      next((response) => {
        //请求后
        Indicator.close(); //隐藏loading
        return response
      })
    })
    //Vue.http.headers.commons['token'] = commons.getCookie('token'); //设置请求头(页面手动刷新，main.js不执行，所以需要拿到这里来设置)

    // 获取用户信用卡列表
    this.$http.get('/loansupermarket-pay/card/bind/loadBindCardList.do?cardType=2').then(function(response) {
      var resBody = response.body;
      if (resBody.code == '000') {
       this.methodList1=resBody.data;
      }else if(resBody.code == '444'){
        window.location.href='../user/login.html?history=1';
      }else {
        if(resBody.mesg){
          MessageBox.alert(resBody.mesg, '提示');
        }
      }
    });

    // 获取用户储蓄卡列表
    this.$http.get('/loansupermarket-pay/card/bind/loadBindCardList.do?status=1&cardType=1').then(function(response) {
      var resBody = response.body;
      if (resBody.code == '000') {
       this.methodList2=resBody.data;
      }else if(resBody.code == '444'){
          window.location.href='../user/login.html?history=1';
      }else {
        if(resBody.mesg){
          MessageBox.alert(resBody.mesg, '提示');
        }
      }
    })
  },
  methods: {
    //返回箭头
    iconClick(){
      // this.$router.push({ path: '/main/mine'});
      window.location.href='./mine.html';
    },
    //我要取现
    getMoney(){
      // this.$router.push({ path: '/main/mine/enchash/getMoney'});
      window.location.href='../enchash/getMoney.html';
    },
    card1(event){
      this.active='1';
      window.localStorage.setItem('active','1');
    },
    card2(){
      this.active='2';
      window.localStorage.setItem('active','2');
    },
    addCard(){
      
      if(this.active==1 && this.methodList2.length==0){
        MessageBox.alert('请先绑定储蓄卡', '提示');
        return;
      }
      // this.$router.push({ path: '/main/mine/myCard/addcard', query: { active: this.active } });
      window.location.href='../enchash/addcard.html?active='+this.active;
    },
    //删除信用卡
    deleteCreditCard(cardId){

      MessageBox.confirm('确定要删除该卡吗?').then(action => {
        this.$http.get('/loansupermarket-pay/card/bind/unbindCard?dataId='+cardId).then(function(response) {
          var resBody = response.body;
          if (resBody.code == '000') {
            window.history.go(0);
            //  this.$router.go(0);
          } else {
            if(resBody.mesg){
              MessageBox.alert(resBody.mesg, '提示');
            }
          }
        })
      }).catch(
        ()=>{}
      );
      
      
    },
    //删除储蓄卡
    deleteCard(cardId){
      MessageBox.confirm('确定要删除该卡吗?').then(action => {
        this.$http.get('/loansupermarket-pay/card/bind/unbindCard?dataId='+cardId).then(function(response) {
          var resBody = response.body;
          if (resBody.code == '000') {
            window.history.go(0);
            // this.$router.go(0);
          } else {
            if(resBody.mesg){
              MessageBox.alert(resBody.mesg, '提示');
            }
          }
        })
      }).catch(
        ()=>{}
      );
      
    },
    //设置默认卡
    setDefaultCard(cardId){

      MessageBox.confirm('确定要设置该卡为默认卡吗?').then(action => {
        this.$http.post('/loansupermarket-pay/card/bind/setDefaultCard',{dataId:cardId}).then(function(response) {
          var resBody = response.body;
          if (resBody.code == '000') {
            window.history.go(0);
            // this.$router.go(0);
          } else {
            if(resBody.mesg){
              MessageBox.alert(resBody.mesg, '提示');
            }
          }
        })
      }).catch(
        ()=>{}
      );

      
    }
  }
}
</script>
<style lang="scss" scoped>
@import '../../../scss/base.scss';
.header {
    background: -webkit-linear-gradient(bottom, #2ce9e8, #7dd7ff);
    position: fixed;
    top: 0;
    z-index: 10;
    width: 100%;
    height: 1.2rem;
    color: #fff;
    text-align: center;
    font-size: 0.42rem;
    line-height: 1.2rem;
    .icon-qianjin-copy {
        position: absolute;
        left: 0.4rem;
        color: #fff;
    }
    .right{
      position: absolute;
      right: 0.4rem;
      top:0;
      font-size: 0.4rem;
    }
    
}
.main{
  margin-top: 1.2rem;
  .topItem{
    width: 100%;
    height: 1.33rem;
    line-height: 1.33rem;
    font-size: 0.42rem;
    color:#666;
    background:#fff;
    .active{
      color:#00dada;
    }
    &-left{
      float: left;
      width: 50%;
      height: 1.33rem;
      position: relative;
    }
    &-left::after{
      position: absolute;
      content:'';
      width: 1px;
      height: 0.4rem;
      top:0.46rem ;
      right:0;
      background:#ddd;
    }
    &-right{
      float: right;
      width: 50%;
      height: 1.33rem;
    }
  }
  .addCard{
    height: 1.06rem;
    line-height: 1.06rem;
    background:#fff;
    font-size: 0.4rem;
    color:#00dada;
    border-radius: 0.15rem;
    width: 9.2rem;
    margin:0 auto;
    margin-top: 0.26rem;
  }
  .contentItem{
    padding:0 0.4rem;
    &-left{
      &-item{
        margin-top: 0.26rem;
        width: 9.2rem;
        height: 4.2rem;
        background:#fff;
        border-radius: 0.15rem;
        &-top{
          width: 8.13rem;
          height: 2.45rem;
          margin:0 auto;
          border-bottom: 1px solid #e5e5e5;
          position: relative;
          .bankImg{
            float: left;
            margin-top: 0.66rem;
            width: 1.17rem;
            height: 1.17rem;
          }
          .bank{
            float: left;
            margin-top: 0.66rem;
            margin-left:0.4rem ;
            
            .bankName{
              text-align:left;
              font-size: 0.45rem;
              color:#333;
            }
            .bankNO{
              font-size: 0.37rem;
              color:#959595;
              margin-top: 0.26rem;
            }
            .delete{
              position: absolute;
              right:0;
              top:0.48rem;
              width: 0.45rem;
              height: 0.45rem;
            }
          }
        }
        &-bottom{
          height:1.78rem;
          .msg{
            float: left;
            margin-top:0.53rem ;
            margin-left:0.53rem ;
            font-size: 0.37rem;
            color:#00dada;
          }
          img{
            float: right;
            width: 1.14rem;
            margin-top:0.53rem ;
            margin-right:0.53rem ;
          }
        }
      }
    }
    &-right{
      &-item{
        margin-top: 0.26rem;
        width: 9.2rem;
        height: 4.2rem;
        background:#fff;
        border-radius: 0.15rem;
        &-top{
          width: 8.13rem;
          height: 2.45rem;
          margin:0 auto;
          border-bottom: 1px solid #e5e5e5;
          position: relative;
          .bankImg{
            float: left;
            margin-top: 0.66rem;
            width: 1.17rem;
            height: 1.17rem;
          }
          .bank{
            float: left;
            margin-top: 0.66rem;
            margin-left:0.4rem ;
            
            .bankName{
              text-align:left;
              font-size: 0.45rem;
              color:#333;
            }
            .bankNO{
              font-size: 0.37rem;
              color:#959595;
              margin-top: 0.26rem;
            }
            .delete{
              position: absolute;
              right:0;
              top:0.48rem;
              width: 0.45rem;
              height: 0.45rem;
            }
          }
        }
        &-bottom{
          height:1.78rem;
          .msg{
            float: left;
            margin-top:0.53rem ;
            margin-left:0.53rem ;
            font-size: 0.37rem;
            color:#00dada;
          }
          img{
            float: right;
            width: 1.14rem;
            margin-top:0.53rem ;
            margin-right:0.53rem ;
          }
        }
      }
    }
  }
}
.hasNoCard{
  img{
    display: block;
    width: 4rem;
    margin: 0 auto;
    margin-top: 2rem;
  }
  p{
    margin-top: 0.66rem;
    font-size: 0.45rem;
    color:#999;
  }
  div{
    margin: 0 auto;
    margin-top: 0.8rem;
    width: 9rem;
    height: 1.2rem;
    line-height: 1.2rem;
    font-size: 0.4rem;
    color: #fff;
    background: #00dada;
    border-radius: 0.15rem;
  }
}

</style>
